<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1_引出生命周期</title>
    <!-- 引入react核心库 -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../React-js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>
    <style>
      @import 'https://unpkg.com/open-props@1.5.0/open-props.min.css';
      @import 'https://unpkg.com/open-props/normalize.min.css';
      button {
        padding: 10px;
        margin: 20px;
        border-radius: 7px;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/babel">
      /**
       *  1.初始化阶段: 由ReactDOM.render()触发 -- 初次渲染
       *        1.  constructor()
       *        2.  componentWillMount()
       *        3.  render()
       *        4.  componentDidMount()  ==> 常用
       *          ==>一般在这个钩子中做一些初始化的事。例如：开启定时器、发送网络请求、订阅消息
       *  2.更新阶段: 由组件内部 this.setState() 或 父组件重新 render 触发
       *        1. shouldComponentUpdate()
       *        2. componentWillUpdate()
       *        3. render()   (渲染)==> 必须使用的一个
       *        4. componentDidUpdate()
       *  3.卸载组件: 有ReactDOM.unmountComponentAtNode()触发
       *        1. componentWillUnmount() ==> 常用
       *           ==>一般在这个钩子中做一些收尾的事。例如：关闭定时器、取消订阅消息
       *
       */

      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log('count--constructor');
          super(props);
          this.state = { count: 0 };
        }

        // 加一按钮回调
        add = () => {
          const { count } = this.state;
          this.setState({ count: count + 1 });
        };
        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById('test'));
        };
        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate();
        };

        // 组件将要挂载
        componentWillMount() {
          console.log('count--componentWillMount');
        }

        // 组件挂载完毕
        componentDidMount() {
          console.log('count--componentDidMount');
        }

        // 组件将要卸载
        componentWillUnmount() {
          console.log('count--componentDidUnmount');
        }

        // 控制组件更新的"阀门"
        shouldComponentUpdate() {
          console.log('count--shouldComponentUpdate');
          return true;
        }

        // 组件将要更新
        componentWillUpdate() {
          console.log('count--componentWillUpdate');
        }

        // 组件更新完毕
        componentDidUpdate() {
          console.log('count--componentDidUpdate');
        }

        render() {
          console.log('count--render');
          return (
            <div>
              <h2>当前求和为:{this.state.count}</h2>
              <button onClick={this.add}>点我加1</button>
              <button onClick={this.death}>卸载</button>
              <button onClick={this.force}>
                不更改任何状态中的数据，强制更新一下
              </button>
            </div>
          );
        }
      }

      // 父组件
      class A extends React.Component {
        state = { car: true };
        change = () => {
          const { car } = this.state;
          this.setState({ car: !car });
        };
        render() {
          return (
            <div>
              <h1>AAAAA组件</h1>
              <button onClick={this.change}>换车</button>
              <B carName={this.state.car} ha="哈哈" />
            </div>
          );
        }
      }

      // 子组件
      class B extends A {
        // 组件将要接受新的props的钩子
        // componentWillReceiveProps(props) {
        //   console.log('B----componentWillReceiveProps', props);
        // }
        render() {
          return (
            <div>
              <h2>-------------------</h2>
              <h1>
                BBBBB组件----接受到的car-->{' '}
                {this.props.carName ? 'bens' : 'auto'}
              </h1>
            </div>
          );
        }
      }

      // 渲染组件
      ReactDOM.render(<Count />, document.getElementById('test'));
    </script>
  </body>
</html>
